<template>
 <el-card class="box-card">
  <!-- 顶部form表单 -->
  <questions :list="list" @hsearch="hsearch"></questions>
  <!-- 提示栏 -->
  <el-row>
    <el-col>
      <el-alert title="数据共1条" type="info" show-icon></el-alert>
    </el-col>
  </el-row>
  <br>
  <!-- 底部表格 -->
  <el-table :data="list" border style="width: 100%">
    <el-table-column prop="number" label="试题编号" > </el-table-column>
    <el-table-column prop="subject" label="学科"> </el-table-column>
    <el-table-column prop="catalog" label="目录"> </el-table-column>
    <el-table-column  label="题型">
      <template v-slot="scope">
        {{ questionTypeFormatting(scope.row.questionType)}}
      </template>
    </el-table-column>
    <el-table-column  label="题干" width="240">
      <template v-slot="scope">
        <span v-html="scope.row.question"></span>
      </template>
    </el-table-column>
    <el-table-column prop="addDate" label="录入时间">
      <template v-slot="scope">
        <span>{{ dateFormatting(scope.row.addDate) }}</span>
      </template>
    </el-table-column>
    <el-table-column  label="难度">
      <template v-slot="scope">
        {{ difficultyFormatting(scope.row.difficulty)}}
      </template>
    </el-table-column>
    <el-table-column prop="creator" label="录入人"> </el-table-column>
    <el-table-column label="操作" width="220">
      <template v-slot="scope">
        <el-button type="primary" icon="el-icon-view" circle @click="viewDetails(scope.row)"></el-button>
        <el-button type="success" icon="el-icon-edit" circle @click="hChanged(scope.row)"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle @click="hDel(scope.row)"></el-button>
        <el-button type="warning" icon="el-icon-check" circle @click="hchoiceAdd(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 底部分页栏 -->
  <el-row type="flex" justify="end">
      <el-pagination
      layout="total,prev, pager, next, sizes,jumper"
      :page-size="params.pagesize"
      :total="counts"
      :page-sizes="[2,3,5,10,20]"
      :current-page.sync="params.page"
      @size-change="hSizeChange"
      @current-change="hCurrentChange"
      > </el-pagination>
  </el-row>
  <!-- 弹层组件 -->
  <el-dialog v-if="showPreview" :visible.sync="showDialog" title="题目预览" :close-on-click-modal="false" :close-on-press-escape="false">
    <preview @dialogClose="dialogClose" :previewIdList="previewIdList" ref="refPreview"></preview>
  </el-dialog>
</el-card>
</template>

<script>
// 导入form表单组件
import questions from '@/components/questions/questions-form'
// 导入封装的ajax请求函数
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
// 导入封装的组件函数 : 格式化处理请求回的数据
import { questionType, difficulty } from '@/api/hmmm/constants.js'
import { parseTime } from '@/utils/index.js'
// 导入封装的弹层组件
import preview from '../components/preview.vue'

export default {
  components: { questions, preview },
  data () {
    return {
      previewIdList: [],
      showPreview: false,
      showDialog: false,
      list: [],
      page: 0,
      pages: 0,
      pagesize: 2,
      params: {
        page: 1,
        pagesize: 5
      },
      counts: 0,
      choiceState: 1
    }
  },
  // 初始加载基础题库列表
  created () {
    this.loadList()
  },
  methods: {
    // 点击弹层关闭按钮关闭弹层
    dialogClose () {
      this.showDialog = false
      this.showPreview = false
    },
    // 查看题目详情
    viewDetails (data) {
      // 显示弹层
      this.showDialog = true
      this.showPreview = true
      // 父传子
      this.previewIdList = data
      // 调用子组件的函数
      this.$nextTick(() => {
        // 调用子组件中的方法
        this.$refs.refPreview.getPreviewList()
      })
    },
    // 格式化处理录入时间
    dateFormatting (date) {
      return parseTime(date)
    },
    // 初始加载基础题库列表
    async loadList () {
      try {
        // 调用导入的ajax函数
        const { data: res } = await list(this.params)
        console.log('基础题库列表', res)
        // 数据回填
        this.list = res.items
        this.page = res.page
        this.pages = res.pages
        // this.pagesize = res.pagesize
        this.counts = res.counts
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 格式化处理基础题库题型数据
    questionTypeFormatting (value) {
      const item = questionType.find(item => item.value == value)
      if (item) {
        return item.label
      }
    },
    // 格式化处理基础题库难度数据
    difficultyFormatting (value) {
      const item = difficulty.find(item => item.value == value)
      if (item) {
        return item.label
      }
    },
    // 点击删除按钮
    hDel (data) {
      this.$confirm('确定要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDel(data)
      }).catch(() => {

      })
    },
    // 封装删除功能函数
    async doDel (data) {
      // 调用删除函数
      await remove(data)
      // 弹窗提示
      this.$message.success('删除成功')
      // 刷新页面
      this.loadList()
    },
    // 点击加入精选
    hchoiceAdd (data) {
      this.$confirm('确定要加入精选?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dochoiceAdd(data)
      }).catch(() => {

      })
    },
    // 封装添加到精选题库函数
    async dochoiceAdd (data) {
      // 处理需要传参的对象
      data.choiceState = this.choiceState
      // 调用ajxa
      const res = await choiceAdd(data)
      // 弹窗提示
      this.$message.success('添加成功')
      // 刷新页面
      this.loadList()
    },
    // 子传父传递一个事件和一个筛选后的数组res
    hsearch (res) {
      this.list = res
    },
    // 点击修改按钮
    hChanged (data) {
      // 通过路径传递当前需要修改的题目id值
      this.$router.push(`/questions/new?id=${data.id}`)
      // 把当前需要修改的题目传递到vuex保存
      this.$store.commit('detail', data)
    },
    // 分页跳转当前点击的页数
    hCurrentChange (val) {
      this.params.page = val
      this.loadList()
      console.log('当前页数', this.params.page)
    },
    // 分页调整每页显示调试
    hSizeChange (val) {
      this.params.pagesize = val
      this.loadList()
      console.log('当前每页条', this.params.pagesize)
    }
  }
}
</script>

<style scoped lang='less'></style>
